<template>
  <!-- <div>
    {{ "modelValue: " + modelValue + "; paramValue: " + paramValue.value }}
  </div> -->
  <!-- <div>myConstraint:{{ myConstraint }}</div>
  <br />
  <span>{{ queryParams }}</span> -->
  <q-input
    v-if="paramType === 'date'"
    outlined
    dense
    style="width: 15%"
    type="date"
    :label="label"
    v-model="paramValue.value"
    @update:model-value="handleChange"
  />
  <q-select
    v-else-if="
      paramType === 'optionsFromQuery' || paramType === 'optionsFromPreDefined'
    "
    outlined
    dense
    emit-value
    clearable
    use-chips
    map-options
    style="width: 15%"
    :label="label"
    :options="paramRealOptions"
    v-model="paramValue.value"
    @filter="filterFn"
    @filter-abort="abortFilterFn"
    @update:model-value="handleChange"
  />
  <q-input
    v-else-if="paramType === 'text'"
    outlined
    dense
    style="width: 15%"
    :label="label"
    v-model="paramValue.value"
    @update:model-value="handleChange"
  />
  <q-select
    v-else-if="paramType === 'internal'"
    outlined
    dense
    emit-value
    clearable
    map-options
    style="width: 15%"
    :label="label"
    :options="paramRealOptions"
    @filter="filterFn"
    @filter-abort="abortFilterFn"
    v-model="paramValue.value"
    @update:model-value="handleChange"
  />
</template>

<script setup>
import { ref, computed, onMounted, watch, toRefs } from "vue";
import { postAction } from "src/utils/requestAction";
const props = defineProps({
  paramType: {
    default: "text",
    type: String,
  },
  label: {
    default: "",
    type: String,
  },
  paramCode: {
    type: String,
  },
  modelValue: {
    default: "",
    type: String,
  },
  queryParams: {
    type: Object,
  },
});

const paramValue = ref("");
const paramOptions = ref([]);

const RequestParamOptions = async () => {
  await postAction("sqlparam/query-sqlparam-options-by-sqlparam-code", {
    sqlparam_code: props.paramCode,
    constraint: myConstraint.value,
  }).then((res) => {
    if (res.code === 1) {
      paramOptions.value = res.data.records;
      console.log(paramOptions.value);
    }
  });
};

onMounted(() => {
  console.log(props.paramCode);
  paramValue.value = modelValue;
});

const emit = defineEmits(["update:modelValue"]);

const filterFn = (val, update, abort) => {
  update(() => {
    if (
      props.paramType === "optionsFromQuery" ||
      props.paramType === "optionsFromPreDefined" ||
      props.paramType === "internal"
    ) {
      RequestParamOptions();
    }
  });
};

const abortFilterFn = () => {
  // console.log('delayed filter aborted')
};

const myConstraint = computed(() => {
  if (
    !props.paramCode ||
    props.paramCode === "mkt_area" ||
    props.paramCode === "mkt_area_24"
  )
    return null;
  else if (props.paramCode === "dept" || props.paramCode === "dept_24") {
    let thisMktArea = props.queryParams.find((item) => {
      return (
        item.sqlparam_code === "mkt_area" ||
        item.sqlparam_code === "mkt_area_24"
      );
    });
    return thisMktArea.value;
  } else if (
    props.paramCode === "duty_zone" ||
    props.paramCode === "duty_zone_24"
  ) {
    let thisMktArea = props.queryParams.find((item) => {
      return (
        item.sqlparam_code === "mkt_area" ||
        item.sqlparam_code === "mkt_area_24"
      );
    });
    let thisDept = props.queryParams.find((item) => {
      return item.sqlparam_code === "dept" || item.sqlparam_code === "dept_24";
    });
    return thisMktArea.value + thisDept.value;
  } else if (props.paramCode === "region" || props.paramCode === "region_24") {
    let thisMktArea = props.queryParams.find((item) => {
      return (
        item.sqlparam_code === "mkt_area" ||
        item.sqlparam_code === "mkt_area_24"
      );
    });
    let thisDept = props.queryParams.find((item) => {
      return item.sqlparam_code === "dept" || item.sqlparam_code === "dept_24";
    });
    let thisDutyZone = props.queryParams.find((item) => {
      return (
        item.sqlparam_code === "duty_zone" ||
        item.sqlparam_code === "duty_zone_24"
      );
    });
    return thisMktArea.value + thisDept.value + thisDutyZone.value;
  }
  return null;
});

const paramRealOptions = computed(() => {
  return paramOptions.value.map((item) => {
    if (!props.constraint || item.constraint === props.constraint)
      return item.option;
  });
});

// watch(paramValue, (val) => {
//   emit
// });

const handleChange = (event) => {
  emit("update:modelValue", event);
};

const { paramType, label, options, modelValue } = toRefs(props);
</script>
